<template>
	<view>
		<my-home v-if="component==='home'" ref="home" @list='list'>
		</my-home>
		<device-map v-if="component==='map'" ref="map" @isShowNav='isShowNav'>
		</device-map>
		<device-list v-if="component==='list'" ref="mescrollItem"></device-list>
		<center v-if="component==='center'" ref="center" @languageChange='languageChange' @unLogin='unLogin'>
		</center>
		<tabbar v-if="isShow" ref="tabbar" :tabbarList='tabbarList' :component='component' @navChange="navChange">
		</tabbar>
	</view>
</template>

<script>
	import {
		showToast
	} from '@/util/toast.js'
	import {
		checkLogin
	} from '@/util/utils.js'
	import MyHome from './components/MyHome/index.vue'
	import DeviceMap from './components/DeviceMap/index.vue'
	import DeviceList from './components/DeviceList/index.vue'
	import Center from './components/Center/index.vue'
	import Tabbar from '@/components/ztn-custom/Tabbar/index.vue'
	import MescrollCompMixin from '@/components/mescroll-uni/mixins/mescroll-comp.js';
	import {nextTick} from 'vue'
	import {
		listenWebSocket,
		leaveWebSocket
	} from '@/util/websocketUtil.js'
	import {
		listUserRole
	} from '@/util/role.js'
	import * as storage from '@/util/storage.js'
	export default {
		name:'Nav',
		mixins: [MescrollCompMixin],
		data() {
			return {
				component: 'home',
				tabbarList: [],
				isShow: true,
				userId: storage.getUserId(),
				wsMonitor: {
					room: 'iot:user:' + this.userId,
					onmessage: this.onSocketMsg
				},
				systemWsMonitor: {
					room: 'iot:system',
					onmessage: this.onSocketMsg
				},
				openNotice: null,
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		onShow() {
			this.openNotice = storage.getOpenNotice()
		},
		onLoad(option) {
			if (option && option.component) {
				this.component = option.component
			}

			this.checkLogin()
			this.initTabbar()
			this.refreshPage()
		},
		beforeDestroy(e) {
			this.unBindSocket()
		},
		methods: {
			bindSocket() {
				this.wsMonitor.room = 'iot:user:' + this.userId
				listenWebSocket(this.wsMonitor)
				listenWebSocket(this.systemWsMonitor)
			},
			unBindSocket() {
				leaveWebSocket(this.wsMonitor)
				leaveWebSocket(this.systemWsMonitor)
			},
			onSocketMsg(nowData) {
				if (this.openNotice && (nowData.type === 'deviceWarn' || nowData.type === 'locWarning' || nowData.type ===
						'deviceStatus')) {
					uni.showToast({
						title: nowData.msg,
						icon: 'none',
						duration: nowData.duration,
						position: 'bottom'
					});
				}
			},
			refreshPage() {
				const component = this.component
				this.component = ''
				nextTick(() => {
					this.component = component
				})
			},
			checkLogin() {
				checkLogin().then(data => {
					listUserRole()
					this.bindSocket()
				})
			},
			init() {

			},
			initTabbar() {
				this.tabbarList = [{
						component: 'home',
						name: 'homePage',
						icon: 'cuIcon-homefill'
					},
					{
						component: 'map',
						name: 'map',
						icon: 'cuIcon-locationfill'
					},
					{
						component: 'list',
						name: 'list',
						icon: 'cuIcon-circlefill'
					},
					{
						component: 'center',
						name: 'center',
						icon: 'cuIcon-peoplefill'
					}
				]
			},
			navChange(component) {
				this.checkLogin()
				const lastComponent = this.component
				if (lastComponent !== component) {
					this.component = component
				} else {
					component === 'list' ? this.$refs['mescroll-item'].init() : this.$refs[component].init()
					showToast(this.$t('refresh'), 'none', 1000, false)
				}
			},
			isShowNav(bool) {
				this.isShow = bool
			},
			list(option) {
				this.component = option.component
			},
			languageChange() {
				this.initTabbar()
			},
			unLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
		},
		components: {
			MyHome,
			DeviceMap,
			DeviceList,
			Center,
			Tabbar
		},
		onShareAppMessage(res) {
			const component = this.component
			const nickName = storage.getNickName()
			const shortCompanyName = storage.getShortCompanyName()
			return {
				title: `${nickName}${this.$t('share')}${shortCompanyName}`,
				path: `/pages/nav/nav?component=${component}`,
				success: (res) => {}
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
